<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </p>

    <p>
        <span v-for="n in 10">{{ n }}</span>
    </p>
</div>
<script>
    const {createApp, ref, reactive} = Vue
    const parentMessage = ref('Parent')
    const items = reactive([{message: 'Foo'}, {message: 'Bar'}])

    items.forEach((item, index) => {
        // 可以访问外层的 `parentMessage`
        // 而 `item` 和 `index` 只在这个作用域可用
        console.log(parentMessage.value, item.message, index)
    })

    createApp({
        setup() {
            return {
                items: items,
                parentMessage
            }
        }
    }).mount('#app')
</script>
</body>
</html>